import { memo } from 'react'
import { useMount, useRequest, useSetState ,useBoolean ,useCreation } from 'ahooks'
import { logout } from '@/apis'

import { Token, UserInfo } from '../../apis/config'
import ChangePwModal from '@/components/ChangePwModal'

// import { Button, Layout } from 'antd'
import { Button, Layout } from '@arco-design/web-react'

const { Header: BaseHeader } = Layout

const User = () => {
  const [userInfo, setUserInfo] = useSetState({ name: '' })

  useMount(() => {
    setUserInfo(UserInfo.get())
  })

  return <>{userInfo.name}，欢迎您</>
}

const Header = () => {
  
  const userInfo = useCreation(() => UserInfo.get() || {}, [])
  
  // 修改密码弹窗
  const [open, { setTrue: openChangePwModal, setFalse: hideChangePwModal }] = useBoolean(false)


  useMount(() => {
    if (userInfo.passwdExpired) {
      openChangePwModal()
    }
  })

  const { run: hanldeLogout } = useRequest(() => logout(), {
    manual: true,
    onSuccess: () => {
      Token.remove()
      location.href = '/login'
    }
  })

  return (
    <BaseHeader className="shadow relative z-10 flex items-center justify-end h-68">
      <User />
      <Button className="ml-16" type="text" status='danger' onClick={hanldeLogout}>
        退出登录
      </Button>
      <ChangePwModal
        account={userInfo.account}
        firstLogin={!!userInfo.passwdExpired}
        open={open}
        onCancel={hideChangePwModal}
      />
    </BaseHeader>
  )
}

export default memo(Header)
